<!--
 * @Author: MrDotYan 2564217790@qq.com
 * @Date: 2024-09-14 15:32:13
 * @LastEditors: MrDotYan 2564217790@qq.com
 * @LastEditTime: 2024-09-25 22:07:57
 * @FilePath: /webServerAdmin/src/views/system/email/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="table-box">
    <ProTable ref="proTableRef" :request-api="fetchEmailList" :columns>
      <template #tableHeader>
        <div>
          <el-button @click="send" v-auth="'System.Email.SendEmail'">发送邮件</el-button>
        </div>
      </template>
    </ProTable>
    <Viewer ref="viewRef"></Viewer>
    <SendEmail ref="sendEmailRef" @success="refresh"></SendEmail>
    <JsonViewDrawer ref="jsonViewRef" :json="json">
      <template #json-drawer-top>
        <EDesc :col="1" :columns="descColumns" :data-source="json"></EDesc>
      </template>
    </JsonViewDrawer>
  </div>
</template>

<script lang="tsx" setup>
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { fetchEmailList, removeEmail } from "@/api/modules/email";
import { ref } from "vue";
import { RefOpenEventProps } from "@/typings/interface";
import { EmailSchema } from "@/schema";
import Viewer from "./components/view.vue";
import SendEmail from "./components/sendEmail.vue";
import JsonViewDrawer from "@/components/JsonView/index.vue";
import { ElMessageBox, ElNotification } from "element-plus";
import { ResultEnum } from "@/enums/httpEnum";
import EDesc from "@/components/EDesc/index.vue";

const proTableRef = ref<ProTableInstance>();
const viewRef = ref<RefOpenEventProps<EmailSchema>>();
const sendEmailRef = ref<RefOpenEventProps<EmailSchema>>();
const jsonViewRef = ref();

const json = ref();
function view(row) {
  viewRef.value?.open(row);
}

function send() {
  sendEmailRef.value?.open();
}

function viewReceipt(row) {
  jsonViewRef.value.open();
  json.value = row.returnReceipt;
}

function refresh() {
  proTableRef.value?.getTableList();
}

function remove(row) {
  ElMessageBox.confirm("提示", { type: "error", message: "是否删除当前数据？" })
    .then(() => {
      if (row?.id) {
        removeEmail({ id: row.id }).then(r => {
          const { code, message } = r;
          if (code == ResultEnum.SUCCESS) {
            ElNotification.success("删除成功！");
            refresh();
          } else {
            ElNotification.error(message);
          }
        });
      }
    })
    .catch(err => {
      console.error(err);
    });
}

const descColumns = [
  {
    prop: "success",
    label: "状态",
    render({ value }) {
      return <el-tag type={value ? "success" : "danger"}>{value ? "已发送" : "发送失败"}</el-tag>;
    }
  },
  {
    prop: "message",
    label: "回执"
  }
];

const columns: Array<ColumnProps> = [
  { label: "序号", type: "index", fixed: "left", width: 80 },
  { prop: "receiver", label: "邮件接收者", search: { el: "input" } },
  { prop: "title", label: "邮件标题", search: { el: "input" } },
  { prop: "subject", label: "邮件主题", search: { el: "input" } },
  {
    prop: "status",
    label: "状态",
    render({ row }) {
      return (
        <el-tag type={row.returnReceipt.success ? "success" : "danger"}>
          {row.returnReceipt.success ? "已发送" : "发送失败"}
        </el-tag>
      );
    }
  },
  {
    prop: "context",
    label: "邮件内容",
    render({ row }) {
      return (
        <>
          <el-button type="primary" link onClick={() => view(row)}>
            查看
          </el-button>
        </>
      );
    }
  },
  {
    prop: "returnReceipt",
    label: "邮件回执",
    render({ row }) {
      return (
        <>
          <el-button type="primary" link onClick={() => viewReceipt(row)}>
            查看
          </el-button>
        </>
      );
    }
  },
  {
    prop: "actions",
    label: "操作",
    render({ row }) {
      return (
        <>
          <el-button type="danger" v-auth="System.Email.RemoveEmail" link onClick={() => remove(row)}>
            删除
          </el-button>
        </>
      );
    }
  }
];
</script>
